import { useEffect, useInsertionEffect } from "react";
import { useState, useRef, useLayoutEffect } from "react";
import axios from "axios";
import './App.scss'

function App() {
  const [proList, setProList] = useState([]);
  const [count, setCount]=useState(1)
  const timeRef = useRef(null);

  useLayoutEffect(()=>{
    // console.log('66666----'+count);
    timeRef.current= setInterval(()=>{
      console.log('55555----'+count);
    },2000)
    return ()=>{
      //该函数会在下一次执行useEffect之前被调用
      //用来清除副作用的函数，即异步操作
      // console.log('88888----'+count);
      clearInterval(timeRef.current)
    }
  },[count])

  //useEffect可以写多次


    

  return (
    <div>
      <h1 className="rotate">APP</h1>
      <div className="animate__animated animate__flash animate__infinite">桀桀桀</div>
      <button onClick={()=>{
        setCount(count+1)
      }}>点击下一页</button>
      <ol>
      {proList && proList.map((item) => {
        return  <li key={item.proid}>{item.proname}</li>
      })}
      </ol>
    </div>
  );
}

export default App;
